<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" rel="stylesheet" href="/css/user.css"/>
</head>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<body>


<div id="app">
    <table class="altrowstable" id="alternatecolor">
        <tr>
            <th>用户编号</th>
            <th>用户名</th>
            <th>密码</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>邮箱</th>
            <th>删除操作</th>
        </tr>
        <tr v-for="user in userList">
            <td>{{user.id}}</td>
            <td>{{user.username}}</td>
            <td>{{user.password}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>{{user.sex}}</td>
            <td>{{user.birthday}}</td>
            <td>{{user.email}}</td>
            <td>
                <button v-on:click="deleteUserById(user)">删除</button>
            </td>
        </tr>
    </table>

</div>

</body>
<script>
    let vue = new Vue({
        el: "#app",
        data: {
            userList: []
        },

        methods: {
            initData: function () {

                axios.get("/findAll").then(
                    res => {
                        this.userList = res.data;
                    }
                )
            },

            deleteUserById:function (user) {
                var _index = this.userList.indexOf(user);
                axios.get("/deleteUserById/"+user.id).then(
                    res => {
                       this.userList.splice(_index,1);
                    }
                )
            }
        },
        created: function () {
            this.initData();
        }
    })
</script>
</html>